<template>
	<view class="app">
		<view class="top-header" style="padding-top: 110rpx;background-color: white;">
			<view class="site-btn" style="display: flex;align-items: center;padding: 12rpx 20rpx 12rpx 12rpx;background-color: #f0fbf4;width: fit-content;margin: 0 auto 0 30rpx;border-radius: 32rpx;" @click="showSiteSelect=true">
				<u-icon class="iconfont icon-dingwei" style="font-size: 40rpx;"></u-icon>
				<text style="color: #36BE6A;padding-left: 8rpx;">{{nowSite.label}}</text>
			</view>
			<u-select @confirm="changeSite" v-model="showSiteSelect" :list="siteList" value-name="recyclerSiteId" label-name="siteName"></u-select>
		</view>
		<u-sticky>
			<view class="order-tabs">


				<u-tabs :is-scroll="true" :scrollable="false" :show-head="false" active-color="#36BE6A"  :list="wasteCategorys" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>

				<u-tabs :is-scroll="true" :show-head="false" active-color="#36BE6A"  :list="wasteCategorys" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>
				<u-tabs :is-scroll="true" :show-head="false" active-color="#36BE6A"  :list="wasteCategorys" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>

			</view>
		</u-sticky> 
		<view class="waste-list">
			<view class="waste-item-box" v-for="(item,index) in list" 
			@body-click="gotoOrderInfo(item)" :key="item.orderId" 
			style="width: 690rpx;height: 280rpx;background: #FFFFFF;border-radius: 16rpx 16rpx 16rpx 16rpx;margin: 20rpx auto;">
				<view class="waste-item-top" style="display: flex;padding:30rpx 0;margin:0 24rpx;border-bottom: 1rpx solid #EEEEEE;">
					<view class="waste-item-icon" style="width: 180rpx;height: 120rpx;">
						<!-- <image src="../../static/images/banner1.png" style="width: 100%;height: 100%;border-radius: 16rpx;"></image> -->
					</view>
					<view class="waste-item-title" style="flex: 1;padding-left: 20rpx;">
						<text style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 36rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;width: 100%;display: block;margin-bottom:24rpx;">黄纸<text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;">（纸皮类）</text></text>
						<text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 22rpx;color: #999999;text-align: left;font-style: normal;text-transform: none;">更新时间: 2024-05-05 17:20:30</text>
					</view> 

					</view>
					</view>
				</view>
				<view class="waste-item-bottom" style="display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;">
					<view class="waste-item-money" style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #333333;line-height: 102rpx;text-align: left;font-style: normal;text-transform: none;">
						回收单价<text style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #333333;line-height: 102rpx;text-align: left;font-style: normal;text-transform: none;padding-right:8rpx;">￥0.34</text><text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 22rpx;color: #666666;line-height: 102rpx;text-align: left;font-style: normal;text-transform: none;">/斤</text>
					</view>
					<view class="waste-item-btn-box">
						<view class="waste-item-btn" style="color: #36BE6A;border: 2rpx solid #36BE6A;padding: 4px 13px;border-radius: 20px;">
							修改价格
						</view>
					</view>
				</view>
		
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
			<c-safe-bottom ></c-safe-bottom>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>
<style scoped>  
	// #ifdef H5
	.safe-bottom{ height: 0rpx;}
	// #endif 
	.order-list{}
	.order-btn-row{ display: flex;}
	.order-btn-right{flex:1;text-align: right;}
	.order-info-row{  display: flex; align-items: center;margin-bottom: 10rpx;}
	.order-info-row label{ flex-shrink: 0;}
	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.recycler-site{ font-size: 34rpx;background-color: #19be6b;color:white;position: fixed;bottom:0;padding:20rpx;width: 100%;z-index: 9999; }
	.recycler-site-row{display: flex;align-items: center; justify-content: space-between;}
	.recycler-site-item{display: flex;align-items: center;}
	/deep/  .uicon-map{margin-right: 20rpx;}

	/* .order-tabs{border:1px red solid;} */
	/* .order-tabs-item{border:1px solid;} */

</style>
<script>  
	export default {
		data() {
			return {
				tabIndex:0,
				loadMoreStatus:"loadmore",
				wasteCategorys:[{
					name: '全部',
					value:'0'
				}, {
					name: '纸皮类',
					value:'1'
				}, {
					name: '金属类',
					value:'2'
				}, {
					name: '塑料类',
					value:'-1'

				}, {
					name: '电子类',
					value:'-2'
				}, {
					name: '衣物类',
					value:'-3'

				}],
				orderStatusName:{
					'0':'待接单','1':'已接单','2':'已完成','-1':'已取消',
				},
				orderParams:{
					pageSize:10,
					curPage:1,   
					siteId:0
				},
				list:[],
				showSiteSelect:false,
				siteList:[],
				nowSite:{lable:'广州体育中心站点'}
			}
		}, 
		computed:{
			 
		},
		methods:{
			getOrderTabs(){
				this.$u.api.recycler.getOrderTabs({
					siteId:this.nowSite.value
				}).then(res => {
					this.orderStatus = res.data
					this.orderStatus.forEach(item => {
						this.orderStatusName[item.value.toString()] = item.name
					})
				})
			},
			orderTabsChange(e){ 
				this.tabIndex = e
				this.list = []
				this.orderParams.curPage = 1
				this.getOrderTabs()
				this.loadList()
			},
			onReachBottom() { 
				this.loadList()
			},
			changeSite(e){
				this.nowSite = e[0] 
				this.orderTabsChange(this.tabIndex)
			},
			getSiteList(){
				this.$u.api.recycler.getSiteList(this.orderParams).then(res => {  
					if(res.status != 200){
						return false
					}
					this.siteList = res.data.list || []
					this.nowSite = {
						value:this.siteList?.[0]?.recyclerSiteId,
						label:this.siteList?.[0]?.siteName,
					}
					this.getOrderTabs()
					this.loadList()
				})
			},
			loadList(){
				this.list=[[],[],[]];
			}, 
			gotoOrderInfo(item){ 
				uni.navigateTo({
					url:"/pageA/order/info?recycler=1&orderId=" + item.orderId
				})
			},
			gotoRecycler(orderId){
				uni.navigateTo({
					url:"/pageA/recycler/form?orderId=" + orderId
				})
			},
			acceptOrder(orderId,accept){   
				 this.$u.api.recycler.acceptOrder({
					 siteId:this.nowSite.value,
					 orderId,
					 accept
				 }).then(res => { 
				 	console.log(res) 
					this.orderTabsChange(this.tabIndex)
				 }) 
			}
		},
		onLoad(option){
			if(option?.tabIndex){
				 this.tabIndex = option?.tabIndex
			} 
		}, 
		onReady() { 
			let _this = this
			uni.$on('orderListUpdate', function(data) { 
				_this.orderTabsChange(_this.tabIndex)
			}) 
			this.getSiteList() 
		},
		onUnload() { 
			uni.$off('orderListUpdate') 
		}
		
	}
</script>